<template>
  <div>
    <div class="title">知识元体系</div>
    <el-skeleton :loading="loading">
      <div class="tree">
        <el-input placeholder="按知识点搜索" prefix-icon="el-icon-search" clearable v-model="filterText" class="search-input" size="medium" v-if="!hideSearch" />
        <el-tree
          class="knowledge-tree"
          ref="knowledgeRef"
          :data="dateset"
          node-key="id"
          show-checkbox
          :props="{ children: 'childs', label: 'name', value: 'id' }"
          accordion
          :filter-node-method="filterNode"
          @check="nodeCheck"
          >
          <template #default="{ node }">
            <el-tooltip class="item" effect="light" placement="top" v-if="node.label.length > 9">
              <template #content>
                {{ node.label }}
              </template>
              <span class="el-tree-childs">
                <span>{{ node.label }}</span>
              </span>
            </el-tooltip>
            <span class="el-tree-childs" v-else>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { ref, Ref, watch } from 'vue';
import $ from '$'
import { ElMessage } from 'element-plus'

export default {
  props: { 
    hideSearch: { type: Boolean, default: () => false },
    subjectId: {
      type: String,
      default: () => ('')
    },
   },
  emits: ['check-change'],
  setup(props) {
    let loading = ref(true);
    let dateset: Ref<any[]> = ref([]);
    const getSubjectHandle = (subjectId) => $.http.post('/admin/knowledgeElement/queryTree', { subjectId }).then(res => {
      
      loading.value = false;
      res.result? dateset.value = res.json : ElMessage.error(res.msg)
       
    });
    props.subjectId ? getSubjectHandle(props.subjectId) : $.emitter.emit('effect', getSubjectHandle)

    /* 搜索 */
    let filterText = ref(null);
    $.emitter.emit('effect', () => filterText.value = null)
    let knowledgeRef: Ref<any> = ref(null);
    const filterNode = (val, node) => (!val || node.name.includes(val));
    watch(filterText, $.debounce(() => knowledgeRef.value.filter(filterText.value) , 300))
    const nodeCheck = (target, { checkedNodes }) => {
      let noChildcheckedNodes = checkedNodes.filter(p => p.childs === null)
      let ids = checkedNodes.map(item => { return item.id })
      let list = noChildcheckedNodes.map(item => { return item })
      $.emitter.emit('data-transmit', ids)
      $.emitter.emit('knowledge-selected', list)
    }
    return { filterText, dateset, filterNode, knowledgeRef, loading, nodeCheck, getSubjectHandle };
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  background: #72b22a;
  color: white;
  margin-bottom: 10px;
}
.tree {
  padding: 12px;
  height: 100%;
  overflow: auto;
  // & > div {
  //   height: 100%;
  //   overflow: auto;
  // }
}
.search-input {
  margin-bottom: 12px;
}
.knowledge-tree {
  padding-bottom: 45px;
  & > div {
    height: 100%;
  }
  .el-tree-node__content {
    height: 32px !important;
  }
}
.el-tree-childs {
  width: 280px;//外部容器的宽度
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>
